/**
 * @create 2022-04-02
 * @desc SearchTable
 */

import type { FC } from 'react';
import { useState } from 'react';
import { GetSearchTableRListItem } from '@src/api';
import { ProTable, ProTableColumnProps } from '@src/components/pro-table';
import { Form } from 'antd';
import { FormatTime } from '@components/table-columns-comps';
import { SEX_TYPE, sexDisplay } from '@common/constant/const';
import { Actions } from './actions';
import { fetcher } from './fetcher';
import { FilterComp } from './filer';

const columns: ProTableColumnProps<GetSearchTableRListItem>[] = [
  {
    title: '姓名',
    dataIndex: 'username',
    width: 80,
  },
  {
    title: '姓名（en）',
    dataIndex: 'username_en',
    width: 80,
  },
  {
    title: '性别',
    dataIndex: 'sex',
    width: 80,
    render: (col: SEX_TYPE) => sexDisplay[col],
  },
  {
    title: '介绍',
    dataIndex: 'describe',
  },
  {
    title: '兴趣',
    dataIndex: 'hobby',
  },
  {
    title: '联系信息',
    dataIndex: 'id',
    render: (id, record) => (
      <>
        <p className="margin-0">电话：{record.phone}</p>
        <p className="margin-0">地址：{record.address || '-'}</p>
      </>
    ),
  },
  {
    title: '工作经验',
    dataIndex: 'experience',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    render: (col: number) => <FormatTime time={col} />,
  },
  {
    title: '更新时间',
    dataIndex: 'lastTime',
    render: (col: number) => <FormatTime time={col} />,
  },
  {
    title: '操作',
    width: 150,
    render: (_: unknown, row: GetSearchTableRListItem) => <Actions row={row} />,
  },
];

const SearchTable: FC = () => {
  const [formRef] = Form.useForm();
  const [params, setParams] = useState<undefined | Record<string, any>>();

  const handleSearch = (v?: Record<string, any>) => {
    setParams(v);
  };

  return (
    <div className="flex flex-col h-full">
      <h1>SearchTable</h1>
      <ProTable<GetSearchTableRListItem>
        params={params}
        rowKey="id"
        TopBlock={<FilterComp formRef={formRef} onSearch={handleSearch} />}
        table={{ rowKey: 'id', columns }}
        fetcher={fetcher}
      />
    </div>
  );
};

export default SearchTable;
